<template>
  <div class="time-cutdown">
    <p ref="timeObj">距离活动{{timeCutdownText}}还有</p>
    <div class="time-spot">
      <span><em>{{totalTime.qianwan}}</em><em>{{totalTime.baiwan}}</em><i>天</i></span>
      <span><em>{{totalTime.shiwan}}</em><em>{{totalTime.wan}}</em><i>时</i></span>
      <span><em>{{totalTime.qian}}</em><em>{{totalTime.bai}}</em><i>分</i></span>
      <span><em>{{totalTime.shi}}</em><em>{{totalTime.ge}}</em><i>秒</i>
      </span>
    </div>
  </div>
</template>

<script>
import { getNetworkTimeApi } from "@/apis/publicApi.js";
export default {
  data() {
    return {
      timer: null, //定时器
      networkTime: 0, //网络时间
      timeCutdownText: "开始", //文案
      totalTime: {
        differTime: 0, //活动倒计时值
        cuttentTime: null, //当前时间
        activeStartTime: 1560614400000, //活动开始时间2019-06-16 00:00:00
        activeEndTime: 1561167000000, //活动结束时间2019-06-22 09:30:00
        qianwan: "0",
        baiwan: "0",
        shiwan: "0",
        wan: "0",
        qian: "0",
        bai: "0",
        shi: "0",
        ge: "0"
      }
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      getNetworkTimeApi().then(res => {
        if (res.code == 200 && res.status == "success") {
          this.networkTime = res.time * 1000;
          window.networkTime = res.time; //传递全局网络时间
          this.totalTime.cuttentTime= res.time*1000;
          this.$emit('sendNetTime');
          let limitStart = this.totalTime.activeStartTime - this.networkTime;
          let limitEnd = this.totalTime.activeEndTime - this.networkTime;
          if (limitStart > 0) {
            this.totalTime.differTime = limitStart / 1000;
          } else if (limitStart < 0 && limitEnd > 0) {
            this.totalTime.differTime = limitEnd / 1000;
            this.timeCutdownText = "结束";
          } else {
            this.totalTime.differTime = -1;
          }
          if(this.totalTime.differTime > -1){this.countDownTime();}
          else{
            this.$refs.timeObj.innerHTML='本场活动已结束';
            window.clearTimeout(this.timer);
          }
        }
      });
    },
    //倒计时
    countDownTime() {
      var that = this;
      this.totalTime.differTime--;
      var time = this.totalTime.differTime;
      let second = time % 60;
      let min = time / 60 > 0 ? parseInt((time / 60) % 60) : 0;
      let hour =
        parseInt((time / 60 / 60) % 24) > 0
          ? parseInt((time / 60 / 60) % 24)
          : 0;
      let day =
        parseInt(time / 60 / 60 / 24) > 0 ? parseInt(time / 60 / 60 / 24) : 0;
      let totalTimeObj = {
        ge: String(second)[1] ? String(second)[1] : String(second)[0],
        shi: String(second).length == 2 ? String(second)[0] : "0",
        bai: String(min)[1] ? String(min)[1] : String(min)[0],
        qian: String(min).length == 2 ? String(min)[0] : "0",
        wan: String(hour)[1] ? String(hour)[1] : String(hour)[0],
        shiwan: String(hour).length == 2 ? String(hour)[0] : "0",
        baiwan: String(day)[1] ? String(day)[1] : String(day)[0],
        qianwan: String(day).length == 2 ? String(day)[0] : "0"
      };
      this.totalTime = Object.assign(this.totalTime, totalTimeObj);
      //页面静默倒计时为0时，重新改变时间
      if (this.totalTime.differTime < 0) {
        window.clearTimeout(this.timer);
        this.totalTime.cuttentTime = new Date().getTime();
        this.compareTime();
        if(this.totalTime.differTime > -1){this.countDownTime();}
        else{
          this.$refs.timeObj.innerHTML='本场活动已结束';
          window.clearTimeout(this.timer);
        }
      } else {
        this.timer=setTimeout(function() { that.countDownTime();}, 1000);
      }
    },
    //时间对比
    compareTime() {
      let that = this;
      if (that.totalTime.cuttentTime < that.totalTime.activeStartTime) {
        that.timeCutdownText = "开始";
        that.totalTime.differTime = parseInt(
          (that.totalTime.activeStartTime - that.totalTime.cuttentTime) / 1000
        );
      } else if (
        that.totalTime.cuttentTime > that.totalTime.activeStartTime &&
        that.totalTime.cuttentTime < that.totalTime.activeEndTime
      ) {
        that.timeCutdownText = "结束";
        let tempTTime = parseInt(
          (that.totalTime.activeEndTime - that.totalTime.cuttentTime) / 1000
        );
        that.totalTime.differTime = tempTTime >0 ? tempTTime : -1 ;
      } else {
        that.totalTime.differTime = -1;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.time-cutdown {
  width: 100%;
  height: 1.2rem;
  font-size: 0.3rem;
  color: #fff;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  p {
    line-height: 0.65rem;
    font-size: 0.32rem;
  }
  .time-spot {
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      line-height: 0.3rem;
    }
    em,
    i {
      font-style: normal;
      display: inline-block;
      width: 0.3rem;
      height: 0.42rem;
      line-height: 0.42rem;
      border-radius: 0.06rem;
    }
    em {
      color: #951415;
      background: #fff;
      margin: 0 0.03rem;
    }
  }
}
</style>